<template>
  <el-card>
    <div class="search-page">
      <p class="title">数据集检索结果</p>
      <div class="search-form">
        <el-form
            label-position="left"
            :model="searchForm"
            label-width="80px"
        >
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="标签名称">
                <el-input v-model="searchForm.tagName" placeholder="标签名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="项目名称">
                <el-input v-model="searchForm.projectName" placeholder="项目名称"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="开始时间">
                <el-date-picker
                    v-model="searchForm.startTime"
                    label="Pick a time"
                    placeholder="Pick a time"
                    style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="结束时间">
                <el-date-picker
                    v-model="searchForm.endTime"
                    label="Pick a time"
                    placeholder="Pick a time"
                    style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" size="large" @click="search">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </el-card>
  <el-card class="res-table">
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="projectName" label="项目名称" width="180" />
        <el-table-column label="图像文件地址">
          <template #default="scope">
            <a :href="scope.row.imageUrl">{{scope.row.imageUrl}}</a>
          </template>
        </el-table-column>
        <el-table-column label="标注文件地址" >
          <template #default="scope">
            <a :href="scope.row.annotationUrl">{{scope.row.annotationUrl}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="tags" label="包含标签" width="200"/>
        <el-table-column label="选择项" width="100" align="center">
          <template #default="scope">
            <el-checkbox v-model="scope.row.isChecked"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background
                       layout="prev, pager, next"
                       :total="total"
                       :page-size="searchForm.pageSize"
                       @current-change="currentPageChange"
        />
      </div>
      <div class="operation-btns">
        <el-button type="primary" @click="download">下载文件</el-button>
        <el-button type="primary" @click="relevance">关联到标签</el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup>

import {reactive, ref} from "vue";
import {searchDataSet,downloadAnnotationFile} from "../api/api";
import { ElMessage } from 'element-plus'


let total = ref(0);
const searchForm = reactive({
  projectName: '',
  pageNum: 1,
  pageSize: 10,
  endTime: '',
  startTime: '',
  tagName: ''
})


let tableData = ref([]);


function search(){
  searchDataSet(searchForm).then(res=>{
    total.value = res.total;
    res.list.forEach(i => i.isChecked = false);
    tableData.value = res.list;
  }).catch(error=>{
    ElMessage.error(error);
  })
}

function currentPageChange(i){
  searchForm.pageNum = i;
  search();
}

function download(){

}

function relevance(){

}
</script>

<style scoped>
.title{
  font-size: 20px;
  font-weight: 600;
}
.search-form{
  width: 1000px;
}
::v-deep .el-button--large{
  width: 100%;
}
.res-table{
  margin: 10px 0;
}
.pagination{
  width: 100%;
  padding: 20px 0;
  display: flex;
  justify-content: center;
}
.operation-btns{
  text-align: right;
}
</style>
